<template>
	<view>
		<view class="center_top_fixed dio-column" :class="{center_top_height:showAll}" @touchmove.stop="">
			<view class="center_top center_bg_color" :style="{paddingTop: menuButtonInfo.top+'px',height:menuButtonInfo.height + 'px'}">
				<view class="dio-row center_search" @click="search">
					<view class="" style="font-size: 28rpx;color: #F0C818;margin-right: 12rpx;width: 28rpx;height: 28rpx;">
						<image style="width: 100%;height: 100%;" src="/static/ss_icon@2x.png"></image>
					</view>
					<view class="" style="color: #C0C0C0;font-size: 28rpx;flex-grow: 1;">
						搜索产品/查看分类
					</view>
					<view class="" style="background-color: #F5F5F5;color: #A9A9A9;font-size: 28rpx;padding: 8rpx 20rpx;border-radius: 40rpx;">
						搜索
					</view>
				</view>
			</view>
			<view class="center_bg_color" :class="{label_hidden:showAll}" style="position: relative;">
				<view class="label_extend_box dio-column" style="justify-content: center;align-items: center;" @click.stop="openAllLabel">
					<view class="label_extend_text">
						展开
					</view>
					<image style="width: 32rpx;height: 32rpx;" src="/static/icon/extend.png"></image>
				</view>
				
				
				<scroll-view scroll-with-animation="true" scroll-x="true" style="white-space: nowrap;width: 100%;" :scroll-into-view="intoLabel">
					<view :id="'a'+index" class="center_label_width" @click="click_label(index)" style="display: inline-block;padding: 10rpx 10rpx;text-align: center;margin-bottom: 10rpx;" v-for="(item, index) in [1,2,3,4,5,7,8,9,0,564,4321,123]" :key="index">
						<view class="dio-column" style="align-items: center;">
							<image mode="aspectFit" :class="{active_label:index == current_label}" style="margin-bottom: 10rpx;border-radius: 24rpx;width: 64rpx;height: 64rpx;transition: all 0.6s;" src="/static/icon//motuologo.jpg"></image>
							<view :class="{active_label_font:index == current_label}" style="color: #FFFFFF;font-size: 26rpx;font-weight: 600;width: 90rpx;">
								摩托
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
			
			
			<view class="dio-column center_bg_color" :class="{label_hidden_t:!showAll}" style="transition: all 0.5s ease;overflow: hidden;height: 640rpx;position: relative;border-radius:0 0 20rpx 20rpx;">
				<view class="dio-row" style="width: 100%;justify-content: space-between;align-items: center;">
					<view class="all_label" style="height: 100rpx;text-align: center;line-height: 100rpx;">
						全部分类
					</view>
					<view class="dio-column" style="color: #FFFFFF;width: 60rpx;justify-content: center;align-items: center;height: 200rpx;box-shadow:none;" @click.stop="openAllLabel">
						<view class="label_extend_text">
							收起
						</view>
						<image style="width: 32rpx;height: 32rpx;" src="/static/icon/extend.png"></image>
					</view>
				</view>
				
				
				<view class="">
				
					<view class="dio-row" style="flex-wrap: wrap;">
						<view class="dio-column" @click="click_label(index)" style="margin: 20rpx 0 10rpx;align-items: center;flex-basis:25%;text-align: center;" v-for="(item, index) in [1,2,3,4,5,7,8,9,0,564,4321,123]" :key="index">
							<image :class="{active_label:index == current_label}" style="margin-bottom: 10rpx;border-radius: 20rpx;width: 64rpx;height: 64rpx;transition: all 0.6s;" src="/static/icon//motuologo.jpg"></image>
							<view :class="{active_label_font:index == current_label}" style="color: #FFFFFF;font-size: 26rpx;font-weight: 600;width: 90rpx;">
								摩托
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			<view class="" style="flex-grow: 2;" @click.stop="openAllLabel">
				
			</view>
		</view>
		<view style="width: 100%;margin-top: 260rpx;" :style="{height: menuButtonInfo.top+'px'}">
			
		</view>
		
		<view class="" style="background-color: #F0F0F0;">
			<dio-footList></dio-footList>
		</view>
		
		<view id="foo_hr" class="" style="height:180rpx;"></view>
		<foo-bar @toIndex="toIndex" :home="1"></foo-bar>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	console.log(menuButtonInfo)
	import fooBar from '@/components/fooBar/fooBar.vue'
	export default {
		components: {
			fooBar
		},
		data() {
			return {
				menuButtonInfo:menuButtonInfo,
				title: 'Hello',
				current_label:0,
				showAll:true,
				intoLabel:'a0'
			}
		},
		onLoad() {
			
		},
		methods: {
			click_label(e){
				this.showAll = false;
				this.current_label = e;
				this.intoLabel = 'a' + e;
			},
			onChooseAvatar(e) {
				console.log("?",e)
			    this.defaultAvatarUrl = e.detail.avatarUrl
			    
			},
			getUserProfile(){
				var that = this
				uni.getUserProfile({
					desc: '个人登录，记录数据', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success(res) {
						console.log(res)
						that.name = res.userInfo.nickName; //昵称
						that.defaultAvatarUrl = res.userInfo.avatarUrl; //头像
						
					},
					fail() {
						console.log("获取用户信息失败");
					}
				});
			},
			test(){
				
				uni.getUserInfo({
					success(res) {
						console.log(res)
					}
				})
			},
			toIndex(index) {
				let that = this
				that.index = index
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/center/center'
					})
				} else if (index == 2) {
					uni.switchTab({
						url: '/pages/list/list'
					})
				} else if (index == 3) {
					uni.switchTab({
						url: '/pages/user/user'
					})
				} else if (index == 4) {
					if (!that.vuex_user) {
						that.loginShow = true
						return
					}
					that.goToWrite()
				}
			},
			openAllLabel(){
				console.log("???")
				this.showAll = !this.showAll
			}
		}
	}
</script>

<style scoped>
	.center_top_height {
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
	}
	.label_hidden{
		display: none;
	}
	.label_hidden_t{
		
		/* transform: translateY(-1000px); */
		height: 0rpx !important;
	}
	.center_top_fixed{
		width: 100%;
		position: fixed !important;
		top: 0;
		left: 0;
	}
	.center_bg_color {
		background-color:#32bfff;
		/* background-color:#FFFFFF; */
	}
	.center_top{
		padding-bottom:20rpx;
		padding-left:20rpx;
	}
	.center_search{
		justify-content: space-between;
		align-items: center;
		background:#FFFFFF;
		border-radius:100rpx;
		padding:0rpx 32rpx;
		height: 100%;
		width: 440rpx;
	}
	
	.active_label{
		transform: scale(1.2,1.2);
	}
	.center_label_width{
		width: 17%;
	}
	.active_label_font{
		color: #FFAB00 !important;
		background-color: #FFFFFF !important;
		border-radius: 20rpx !important;
	}
	.label_extend_box{
		position: absolute !important;
		height: 100%;
		z-index: 999;
		top: 0;
		right: 0;
		width: 60rpx;
		color: #FFFFFF;
		background-color: #32bfff;
		box-shadow:-2rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.2);
	}
	.label_extend_text{
		writing-mode:tb-rl;
		letter-spacing:10rpx;
		font-weight: 600;
		font-size: 28rpx;
	}
	.all_label{
		margin: 0 40rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: 600;
	}
</style>
